<template>
  <el-dialog
    title="编辑提问箱"
    v-model="internalVisible"
    width="30%"
    @close="closeDialog"
  >
    <!-- 表单内容 -->
    <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
      <el-form-item label="名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入提问箱名称"></el-input>
      </el-form-item>

      <el-form-item label="简介" prop="description">
        <el-input type="textarea" v-model="form.description" placeholder="请输入简介"></el-input>
      </el-form-item>
    </el-form>
    <!-- 弹窗的底部操作按钮 -->
    <template #footer>
    <el-popconfirm title="注意：删除提问箱后会自动解散加入提问箱的成员，该操作无法回退！是否确定删除此提问箱？" 
    width="360px" 
    @confirm="handleDeleteConfirm">
    <template #reference>
        <el-button 
        type="text" 
        style="color: #f56c6c; position: absolute; left: 20px;" 
        @click="deleteBox"
      >
      删除此提问箱
      </el-button>
    </template>
  </el-popconfirm >
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="submitForm">保存</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { ref, watch } from 'vue';
import { ElMessage } from 'element-plus';

export default {
  name: 'EditBoxPage',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    boxData: {
      type: Object,
      default: () => ({ name: '', description: '' ,id:''}),
    },
  },
  emits: ['close', 'update','delete'],
  setup(props, { emit }) {
    const internalVisible = ref(props.visible);

    // 表单数据，初始化为父组件传入的 boxData
    const form = ref({
      name: props.boxData.name,
      description: props.boxData.description,
      id:props.boxData.id,
    });

    // 表单验证规则
    const rules = {
      name: [
        { required: true, message: '名称不能为空', trigger: 'blur' },
      ],
      description: [
        { required: true, message: '简介不能为空', trigger: 'blur' },
      ],
    };

    const formRef = ref(null);

    // 监听 visible 的变化
    watch(
      () => props.visible,
      (newVal) => {
        internalVisible.value = newVal;
        if (newVal) {
          // 重置表单数据为父组件传入的数据
          form.value = { ...props.boxData };
        }
      }
    );

    // 关闭弹窗
    const closeDialog = () => {
      internalVisible.value = false;
      emit('close'); // 通知父组件关闭
      resetForm();
    };

    // 重置表单
    const resetForm = () => {
      form.value = { ...props.boxData };
      if (formRef.value) formRef.value.clearValidate();
    };

    // 提交表单
    const submitForm = () => {
      formRef.value.validate((valid) => {
        if (valid) {
          emit('update', form.value); // 提交更新的表单数据
          closeDialog();
        } else {
          ElMessage.error('请检查表单输入');
        }
      });
    };

    const handleDeleteConfirm = () => {
        emit('delete',form.value.id);
        closeDialog();
    };

    return {
      internalVisible,
      form,
      formRef,
      closeDialog,
      submitForm,
      rules,
      handleDeleteConfirm
    };
  },
};
</script>

<style scoped>
</style>
